<template >
    <div class="APP">
<!--    <div class="left">-->
<!--    <div class="name">患者姓名</div>-->
<!--    </div>-->
    <div class="right">
        <div class="back">
            <div class="title" style="margin-top: 60px;padding-top: 60px">入&nbsp;&nbsp;&nbsp;院&nbsp;&nbsp;&nbsp;记&nbsp;&nbsp;&nbsp;录</div>
            <div style="display: flex;margin-top: 30px">
                <div style="margin-left: 50px">科室：</div>
                <div>[内分泌]</div>
                <div style="margin-left: 80px">床号：</div>
                <div>12346</div>
                <div style="margin-left: 80px">姓名：</div>
                <div>[张三丰]</div>
                <div style="margin-left: 80px">住院号：</div>
                <div>515203104</div>
            </div>
            <div class="line"></div>
            <div style="display: flex;margin-top: 30px">
                <div style="margin-left: 50px">患者姓名：</div>
                <div>[张三丰]</div>
                <div style="margin-left: 80px">职业：</div>
                <div>[程序员]</div>
                <div style="margin-left: 80px">性别：</div>
                <div>[男]</div>
                <div style="margin-left: 80px">出生地：</div>
                <div>[安徽合肥]</div>
            </div>
            <div style="display: flex;margin-top: 30px">
                <div style="margin-left: 50px">年龄：</div>
                <div>[36]</div>
                <div style="margin-left: 130px">婚姻状况：</div>
                <div>[已婚]</div>
                <div style="margin-left: 130px">入院时间：</div>
                <div>[2024-12-18 16:05:03]</div>
            </div>
            <div style="display: flex;margin-top: 30px">
                <div style="margin-left: 50px">民族：</div>
                <div>[汉族]</div>
                <div style="margin-left: 80px">记录时间：</div>
                <div>[2024-12-18 16:06:05]]</div>
                <div style="margin-left: 80px">病史描述者：</div>
                <div>[本人]</div>
            </div>
            <div style="display: flex;margin-top: 30px">
            <div style="font-weight: bold;margin-left: 50px">主诉：</div>
                <div>[{{zhusu}}]</div>
            </div>
            <div style="display: flex;margin-top: 30px">
                <div style="font-weight: bold;margin-left: 50px;white-space: nowrap;">现病史：</div>
                <div>[{{xian}}]</div>
            </div>
            <div style="display: flex;margin-top: 30px">
                <div style="font-weight: bold;margin-left: 50px">疾病史：</div>
                <div>[{{jibing}}]</div>
            </div>
            <div style="display: flex;margin-top: 30px">
                <div style="font-weight: bold;margin-left: 50px">传染史：</div>
                <div>[{{chuanran}}]</div>
            </div>
            <div style="display: flex;margin-top: 30px">
                <div style="font-weight: bold;margin-left: 50px">既往史：</div>
                <div>[{{jiwang}}]</div>
            </div>
            <div style="display: flex;margin-top: 30px">
                <div style="font-weight: bold;margin-left: 50px">药物过敏史：</div>
                <div>[{{yaowu}}]</div>
            </div>
            <div style="display: flex;margin-top: 30px">
                <div style="font-weight: bold;margin-left: 50px">个人史：</div>
                <div>[{{geren}}]</div>
            </div>
            <div style="display: flex;margin-top: 30px">
                <div style="font-weight: bold;margin-left: 50px">吸烟史：</div>
                <div>[{{xiyan}}]</div>
            </div>
            <button style="margin-top: 60px;margin-left: 350px" @click="report">一键引用</button>
        </div>
    </div>
        <div style="position: absolute;
        top: 50%;
        left: 45%;" v-if="show">
        <div class="loader"></div>
            <div style="margin-left: 50px;margin-top: 10px;color: blue">引用中....</div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "reportImag",
        data() {
            return {
                show:false,
             zhusu:'',
             xian:'',
             jibing:'',
             chuanran:'',
             jiwang:'',
             yaowu:'',
             geren:'',
             xiyan:'',
            };
        },
        created(){

        },
        methods:{
            report()
            {
                this.show = true
                setTimeout(()=>{
                    this.showRoprt()
                },2000)
            },
            showRoprt(){
                this.show = false
                this.zhusu = '多饮、多尿、多食伴体重下降3个月。'
                this.xian = '患者3个月前无明显诱因出现多饮、多尿、多食，伴体重下降约5公斤。患者未予以重视，症状逐渐加重，遂来我院就诊。患者自发病以来，精神状态一般，食欲正常，睡眠欠佳，大便正常，小便频繁。'
                this.jibing = '患者确诊2型糖尿病2年，平素口服降糖药物治疗，血糖控制情况一般。无其他重大疾病史。'
                this.chuanran='患者否认近期有传染病接触史，否认有结核、乙肝、丙肝等传染病史'
                this.jiwang = '患者既往体健，否认有高血压、心脏病、脑血管疾病等慢性病史。'
                this.yaowu = '患者否认有药物过敏史。'
                this.geren = '患者为办公室职员，工作压力较大，平时缺乏运动。无不良嗜好，无吸烟、饮酒史。'
                this.xiyan = '患者否认吸烟史。'
            }
        }
    }
</script>

<style scoped>
    .title
    {
        font-weight: inherit;
        font-size: 30px;
        padding-left: 300px;
    }
    .APP{
        width: 2000px;
        height: 1000px;
        display: flex;
        align-items: center;
    }
.left{
    left: 1px;
    top: 0;
    width: 200px;
    height: 100%;
    border: 1px solid black;
}
    .line{
        margin-left: 40px;
        margin-top: 20px;
        width: 720px;
        border-bottom: 1px solid black;
    }
    .back
    {
        margin-left: 450px;
        width: 800px;
        height: 1000px;
        box-shadow: 0px 0px 1px 1px #888888;
    }
    /* 加载动画的CSS样式 */
    .loader {
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #3498db;
        width: 120px;
        height: 120px;
        animation: spin 2s linear infinite;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>